<template>
	<uni-notice-bar single color="#2979FF" background-color="#EAF2FF"
	text="本平台进提供信息交流，请注意辨别交易内容真实性。" />

	<view class="page page-requiredetail" v-if="i.description">
		<view flex items-center p-10px justify-between>
			<view flex items-center>
				<template v-if="type == 'supply'">
					<image v-if="i.firm?.logo" :src="i.firm?.logo" class="circle1" mode="scaleToFill" />
					<view v-else class="icon icon-enterprise-logo"></view>
				</template>
				<view v-else class="circle1 bg-blue-4" text-xs>求购方</view>
				<view ml10px>
					<view text-sm v-if="type == 'supply'">{{i.firm?.firm_name}}</view>
					<view text-sm v-else>求购方</view>
					<view text-xs mt5px color-bluegray>{{i.firm?.established_time}}</view>
				</view>
			</view>
<!-- 			
			<view class="contact bg-blue-1" v-if="(type == 'supply' && i.firm?.contact_phone) || i.member?.mobile" @click="makePhoneCall(type == 'supply'?i.firm.contact_phone : i.member.mobile)">
				<view class="icon icon-tel"></view>
				<view pl-2px>联系</view>
			</view> 
-->
		</view>

		<view class="block-item p-10px mb10px">
			<view flex items-baseline pb-10px>
				<view v-for="v in i.tags" mr-6px whitespace-nowrap>
					<uni-tag :text="v" type="error" size="mini" />
				</view>
				<view class="font-600 text-lg mt-4px">{{i.description}}</view>
			</view>
			<view flex items-center pt-5px pb5px v-if="i.category_name">
				<view class="icon icon-type"></view>
				<view text-sm ml-10px mt--2px>类型： {{i.category_name}}</view>
			</view>
			<view flex items-center pt-5px pb5px>
				<view class="icon icon-name"></view>
				<view text-sm ml-10px mt--2px>名称： {{i.name}}</view>
			</view>
			<view flex items-center pt-5px pb5px>
				<view class="icon icon-num"></view>
				<view text-sm ml-10px mt--2px>数量： {{i.number}}</view>
			</view>
			<view flex items-center pt-5px pb5px>
				<view class="icon icon-price"></view>
				<view text-sm ml-10px mt--2px>价格： {{i.price_name}}</view>
			</view>
			<view flex items-start pt-5px pb5px>
				<view min-w-75px flex items-center>
					<view class="icon icon-region"></view>
					<view text-sm ml-10px>地区：</view>
				</view>
				<view> 
					<text mr-10px mb-10px v-for="v in Object.values(i.region_name)">{{ v }}</text>
				</view>
			</view>
			<view flex items-center pt-5px pb-15px v-if="i.ageing_name">
				<view class="icon icon-time"></view>
				<view text-sm ml-10px mt--2px>时效： {{i.ageing_name}}</view>
			</view>
			<view v-if="i.images?.length">
				<image class="detail-image" v-for="img in i.images" :key="img" :src="img" lazy-load mode="widthFix" />
			</view>
			
			<divider></divider>

		</view>

		<view pl-10px pr-10px>
			<view flex items-center text-base pb-10px>
				<view class="icon icon-tip color-amber"></view>
				<view pl-4px>温馨提示</view>
			</view>

			<view text-xs>
				1.以上所展示的信息由用户自行提供，内容的真实性、准确性和合法性由发布用户负责，汇塑云商对此不承担任何责任
			</view>
			<view text-xs>
				2.如该信息有任何问题，请点击右上角的举报按钮并反馈问题，汇塑云商会积极协助配合
			</view>
			<view text-xs pb-20px>
				3.汇塑云商只保证信息的时效性，请谨慎交易，请注意交易量过大的、急于要货的业务订单，尽可能避免赊销，谨防诈骗
			</view>
		</view>
		

		<divider height="5px"></divider>

		<view px-10px py-20px text-base font-500>相关推荐</view>
		<divider></divider>

		<view class="block-item p-10px mb10px" v-for="i in list" :key="type == 'supply'? i.supply_id : i.askbuy_id" v-if="list.length">
			<view flex items-center pb-10px>
				<view v-for="v in i.tags" mr-6px>
					<uni-tag :text="v" type="error" size="mini" />
				</view>
				<view class="font-600 text-lg mt-4px ml-5px">{{i.description}}</view>
			</view>
			<view flex items-center pt-5px pb5px v-if="i.category_name">
				<view class="icon icon-type"></view>
				<view text-sm ml-10px mt--2px>类型： {{i.category_name}}</view>
			</view>
			<view flex items-center pt-5px pb5px>
				<view class="icon icon-name"></view>
				<view text-sm ml-10px mt--2px>名称： {{i.name}}</view>
			</view>
			<view flex items-center pt-5px pb5px>
				<view class="icon icon-num"></view>
				<view text-sm ml-10px mt--2px>数量： {{i.number}}</view>
			</view>
			<view flex items-center pt-5px pb5px>
				<view class="icon icon-price"></view>
				<view text-sm ml-10px mt--2px>价格： {{i.price_name}}</view>
			</view>
			<view flex items-start pt-5px pb5px>
				<view min-w-75px flex items-center>
					<view class="icon icon-region"></view>
					<view text-sm ml-10px>地区：</view>
				</view>
				<view> 
					<text mr-10px mb-10px v-for="v in Object.values(i.region_name)">{{ v }}</text>
				</view>
			</view>
			<view flex items-center pt-5px pb5px v-if="type == 'require'">
				<view class="icon icon-time"></view>
				<view text-sm ml-10px mt--2px>时效： {{i.ageing_name}}</view>
			</view>
			<view class="overflow-auto whitespace-nowrap pt-5px pb10px" v-if="i.images?.length" @click="goDetail(type == 'supply'? i.supply_id : i.askbuy_id)">
				<image class="image" v-for="img in i.images" :key="img" :src="img" lazy-load mode="widthFix" />
			</view>
			<view flex items-center pt-5px pb25px justify-between>
				<view flex items-center>
					<template v-if="type == 'supply'">
						<image v-if="i.firm?.logo" :src="i.firm?.logo" class="circle1" mode="scaleToFill" />
						<view v-else class="icon icon-enterprise-logo"></view>
					</template>
					<view v-else class="circle1 text-xs bg-blue-4">求购方</view>
					<view ml10px>
						<view text-sm v-if="type == 'supply'">{{i.firm?.firm_name}}</view>
						<view text-sm v-else>求购方</view>
						<view text-xs mt5px color-bluegray>{{i.firm?.established_time}}</view>
					</view>
				</view>
					
				<view class="contact bg-blue-1" v-if="(type == 'supply' && i.firm?.contact_phone) || i.member?.mobile" @click="phoneCall(i)">
					<view class="icon icon-tel"></view>
					<view pl-2px>联系</view>
				</view>
			</view>

			<divider></divider>

		</view>


		<view class="bottom-btns">
			<!-- <view class="icon icon-appraise"></view> -->
			<view class="icon icon-collect" :class="[collected ? 'icon-collect-filled' : 'icon-collect']" @click="collectFn"></view>
			<button class="open-type-button" open-type="share">
				<view class="icon icon-share"></view>
			</button>
			<view class="phone-call" v-if="(type == 'supply' && i.firm?.contact_phone) || i.member?.mobile"  @click="phoneCall(i)">
				<view class="icon icon-tel"></view>
				<view pl-2px>联系</view>
			</view>
		</view>
		
	</view>
	<contact :phone="requirePhone" :id="require_id" v-model:show="showContactModel" />

</template>

<script setup>
	import api from '@/api'
	import { makePhoneCall } from '@/common/utils'
	import { ref } from 'vue'
	import { onShareAppMessage } from "@dcloudio/uni-app"

	const props = defineProps({
		id: String,
		type: 'require'		//require求购 supply供应
	})

	const collected = ref(false)
	const i = ref({})
	async function getInfo() {
		const params = props.type == 'supply' ? {supply_id: props.id} : {askbuy_id: props.id}
		const res = await api[props.type == 'supply'? 'getSupplyInfo':'getRequireInfo'](params)
		collected.value = res.collect
		i.value = res
		getList()
	}
	getInfo()

	const collectFn = async () => {
		//...收藏接口
		let res = await api.collect({
			source_id: props.type == 'supply'? i.value.supply_id : i.value.askbuy_id,
			type: props.type == 'supply'? 'supply': 'askbuy'
		})
		if(res) {
			collected.value = !collected.value
		}
	}

	const page_no = ref(1) 
	const page_size = ref(100) 
	const loading = ref(false)
	const loadedAll = ref(false)
	const list = ref([])

	async function getList() {
		if(loadedAll.value) return
		loading.value = true
		const data = await api[props.type == 'supply'? 'getSupplyList':'getRequireList']({
				page_size: page_size.value,
				page_no: page_no.value,
				category: i.value.category,
				filtration: props.type == 'supply'? i.value.supply_id : i.value.askbuy_id 
			})
		if(data.list.length < page_size.value) {
			loadedAll.value = true
		}
		page_no.value += 1
		list.value = [ ...list.value, ...data.list]
		loading.value = false
	}

	const goDetail = id => {
		uni.navigateTo({
			url: `/pages/demand/detail?id=${id}&type=${props.type}`
		})
	}

	const showContactModel = ref(false)
	const requirePhone = ref('')
	const require_id = ref('')
	const phoneCall = i => {
		if(props.type == 'supply') {
			makePhoneCall({
				phone: i.firm.contact_phone,
				source: 'supply',
				id: i.supply_id
			})
			return
		}
		requirePhone.value = i.member.mobile
		require_id.value = i.askbuy_id
		showContactModel.value = true
	}

	onShareAppMessage(() => {
		return {
			title: '帖子详情',
			path: `/pages/demand/detail?id=${props.id}&type=${props.type}`
		}
	})

</script>

<style lang="scss">
.page-requiredetail {

	.block-item {
		.icon {
			color: gray;
		}
	}

	.icon.icon-enterprise-logo {
		color: $uni-color-navigator;
		font-size: 100upx;
	}

	.detail-image {
		width: 100%;
		display: block;
	}
	.image {
		width: 100px;
		height: 100px;
		margin-right: 10px;
	}

	.circle1 {
		width: 40px;
		height: 40px;
		padding: 4px;
		border-radius: 100%;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.contact {
		display: flex;
		align-items: center;
		color: $uni-color-blue;
		border-radius: 100px;
		padding: 4px 10px;

		.icon {
			color: $uni-color-blue;
			margin-top: 2px;
			margin-right: 2px;
		}
	}

	.bottom-btns {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9;
		width: 100vw;
		height: 120upx;
		display: flex;
		align-items: center;
		background: white;
		padding: 0 24upx;
		box-sizing: border-box;
		box-shadow: 0 0 4px 8px #f1f1f1;
		.icon {
			font-size: 60upx;
			margin: 0 24upx;
		}

		.icon-collect-filled {
			color: $uni-color-orange;
		}

		.phone-call {
			height: 80upx;
			margin-left: 10px;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 100px;
			color: white;
			background-color: $uni-color-blue;
			font-size: 18px;
			.icon {
				font-size: 20px;
			}
		}
	}

}

</style>

